<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台</title>
    <link rel="stylesheet" href="static/css/marquee.css">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
</head>
<style>
    .closeMarquee {
        position: relative;
        float: right;
        margin-top: -60px;
        margin-right: -14px;
    }
</style>
<body class="layui-layout-body" style="overflow: hidden;">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <img src="static/images/logo1.png">
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" id="topNav" lay-filter="topNav" style="margin-left: 30px;">

        </ul>

        <ul class="layui-nav layui-layout-right" lay-filter="rightNav">
            <li class="layui-nav-item">
                <a href="javascript:;" id="userName"></a>
                <dl class="layui-nav-child">
                    <dd><a id="userInfo">基本资料</a></dd>
                    <dd><a id="modifyPassword">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:JJZ.logout()">退了</a></li>
        </ul>
    </div>

    <!--跑马灯位置-->
    <div id="marqueeContent" class="content" style="z-index: 9999;position: relative;display: none">
        <div class="container">
            <div class="marquee-sibling">
                本月重复故障设备
            </div>
            <div class="marquee">
                <ul class="marquee-content-items" id="marqueeItem">
                </ul>
            </div>
        </div>
        <button class="closeMarquee" onclick="closeMarquee()"><i class="layui-icon layui-icon-close"
                                                                 style="font-size: 15px; color: #1E9FFF;"></i></button>
    </div>
    <!--跑马灯结束-->

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" id="leftNav" lay-filter="leftNav">

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe id="iframeContent" name="content" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

    </div>

    <div class="layui-footer">
        © 设备维护分析评价系统
    </div>
</div>
<script src="static/plugins/layui/layui.js"></script>
<script src="static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="static/js/marquee.js"></script>
<script src="static/js/device.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'jquery', 'layer'], function () {
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;

        //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
        element.init();
        var user = window.sessionStorage.getItem("loginUser");
        var jsonUser = JSON.parse(user);
        $('#userName').text(jsonUser.username);

        var now = new Date();
        var startTime = JJZ.FormatDate(now, 'yyyyMM');
        // var startTime='201905';
        var param = 'current=1&pageSize=11&startTime=' + startTime + '&endTime=' + startTime;
        //初始化跑马灯信息
        JJZ.requestData('/home/repeatDamageDevice', param, function (data) {
            var result = data.records;
            if (result.length > 0) {
                for (var index in result) {
                    if (index < 10) {
                        var tempLi = '<li>' + result[index].deviceName + '(' + result[index].deviceNumber + ')' + '</li>';
                        $('#marqueeItem').append(tempLi);
                    } else {
                        var moretempLi = '<li><a onclick="moreDamageDevice()" style="color: #1E9FFF">' + '●●●' + '</a></li>';
                        $('#marqueeItem').append(moretempLi);
                        break;
                    }
                }
                $('#marqueeContent').css('display', 'block');
                createMarquee({});
            } else {
                $('#marqueeContent').remove();
            }
        });

        //初始化顶部导航栏
        JJZ.requestData('/menu/ignTree', '', function (data) {
            // console.log(data);
            var topNav = data.root;
            var topUL = $('#topNav');
            var leftUl = $('#leftNav');
            for (var index in topNav) {
                var nav = '<li class="layui-nav-item">' +
                    '<a href="javascript:;" data="' + topNav[index].url + '">' + topNav[index].name + '</a>' +
                    '</li>';
                topUL.append(nav);
                window.sessionStorage.setItem(topNav[index].url, JSON.stringify(topNav[index].children));
            }
            InitLeftNav(topNav[0].children, leftUl);
            var firstChildren = topNav[0].children[0];
            setIframeSrc(firstChildren.url);
            element.init();
        });

        //监听导航 顶层导航
        element.on('nav(topNav)', function (elem) {
            var navMenuLabel = elem.attr("data");
            var leftMenu = window.sessionStorage.getItem(navMenuLabel);
            var menus = JSON.parse(leftMenu);
            var leftUl = $('#leftNav');
            leftUl.empty();
            InitLeftNav(menus, leftUl);
            element.init();
        });


        //监听导航 左侧
        element.on('nav(leftNav)', function (elem) {
            var url = elem.attr("data");
            setIframeSrc(url);
        });

        //监听导航 右侧
        element.on('nav(rightNav)', function (elem) {
            var url = elem.attr("data");
            if (url && url != '') {
                setIframeSrc(url);
            }
        });

        function setIframeSrc(url) {
            if (url) {
                $('#iframeContent').attr('src', JJZ.baseUrl + url);
            }
        }

        function InitLeftNav(menus, leftUl) {
            for (var index in menus) {
                var createLi = document.createElement('li');
                createLi.setAttribute("class", "layui-nav-item");
                var createA = document.createElement('a');
                createA.href = 'javascript:;';
                createA.innerText = menus[index].name;
                createA.setAttribute("data", menus[index].url);
                createLi.appendChild(createA);
                leftUl.append(createLi);
                var chilerenMenus = menus.children;
                var createDL = document.createElement('dl');
                createDL.setAttribute("class", "layui-nav-child");
                for (var i in chilerenMenus) {
                    var dd = '<dd><a href="javascript:;" data="' + chilerenMenus[i].url + '">' + chilerenMenus[i].name + '</a></dd>';
                    createDL.append(dd);
                }
                leftUl.append(createDL);
            }
        }

        $('#userInfo').click(function () {
            var url = "/user/userInfo?id=" + jsonUser.id;
            setIframeSrc(url);
        });
        $('#modifyPassword').click(function () {
            layer.open({
                type: 2
                , resize: false
                , content: ['user/modifyPassword?id=' + jsonUser.id] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                , area: ['400px', '300px']
                , end: function () {
                    JJZ.logout();
                }
            });
        })

    });

    function closeMarquee() {
        $('#marqueeContent').css('display', 'none');
        $('#marqueeContent').remove();
    }

    function moreDamageDevice() {
        $('#iframeContent').attr('src', JJZ.baseUrl + '/home/repeatDamageDevice');
    }

    function reinitIframe() {
        var iframe = document.getElementById("iframeContent");
        try {
            // var bHeight = iframe.contentWindow.document.body.scrollHeight;
            //  var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            //  var bodyHeight =  iframe.contentWindow.document.body.offsetHeight;
            // console.log('bodyHeight',bodyHeight);

            var bodyClientHeight = iframe.contentWindow.document.body.clientHeight;
            //console.log('bodyClientHeight',bodyClientHeight);
            var windowHeight = window.innerHeight;
            //console.log('windowHeight',windowHeight - 60 -44);
            var showHeight = windowHeight - 60 - 44 - 2.6;
            var height = Math.max(bodyClientHeight, showHeight);
            iframe.height = height;
        } catch (ex) {
        }
    }

    //不断动态计算iframe的高度信息
    window.setInterval("reinitIframe()", 200);

</script>
</body>
</html>